<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>地图展示</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <link rel="stylesheet" href="${ctxPath}/component/pear/css/pear.css"/>
    <style>
        body,
        html,
        #container {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }
        .BMap_cpyCtrl {
            display:none;
        }
        .anchorBL{
            display:none;
        }
        #search1{
            position: fixed;
            top: 0px;
            left: 10px;
            z-index: 10!important;
        }
        #search2{
            position: fixed;
            top: 0px;
            right: 10px;
            z-index: 10!important;
        }
        .ui_city_change_top .ui_city_change_inner, .ui_city_change_bottom .ui_city_change_inner{
            line-height: 28px!important;
            height: 28px!important;
            border-width: 1px!important;
            border-style: solid!important;
            border-radius: 4px!important;
            border-color: #eee!important;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out!important;
        }
        .ui_city_change{
            height: 30px!important;
        }
        .tangram-suggestion-main{
            max-height: 450px!important;
            overflow-y: auto!important;
            overflow-x: hidden;
        }
        .tangram-suggestion{
            border: 1px solid #e4e6e7;
            font-family: Arial,Helvetica,"Microsoft YaHei",sans-serif;
            background: #fff;
            cursor: default;
        }
        ::-webkit-scrollbar {
            width: 2px;
            height: 5px;
        }
        ::-webkit-scrollbar-track {
            background: transparent;
            box-shadow: inset 0 0 5px rgba(0,0,0,0);
            border-radius: 2px;
        }

        ::-webkit-scrollbar-thumb {
            background: transparent;
            box-shadow: inset 0 0 5px rgba(0,0,0,0);
            border-radius: 5px;
            height: 5px;
        }
        .bgA{
            background-color: rgba(0,0,0,0.1);
        }
        tr:hover{
            background-color: rgba(0,0,0,0.1);
        }
        .tangram-suggestion{border:1px solid #e4e6e7;font-family:Arial,Helvetica,"Microsoft YaHei",sans-serif;background:#fff;cursor:default;}.tangram-suggestion table{width:100%;font-size:12px;cursor:default;}.tangram-suggestion table tr td{overflow:hidden;height:32px;padding:0 10px;font-style:normal;line-height:32px;text-decoration:none;color:#666;cursor:pointer;}.tangram-suggestion .route-icon{overflow:hidden;padding-left:20px;font-style:normal;background: url("${ctxPath}/admin/images/suggestion-icon_013979b.png") no-repeat 0 -14px;}.tangram-suggestion-current{background:#ebebeb;}.tangram-suggestion-prepend{padding:2px;font:12px verdana;color:#c0c0c0;}.tangram-suggestion-append{padding:2px;font:12px verdana;text-align:right;color:#c0c0c0;}.tangram-suggestion-grey{color:#c0c0c0;}

    </style>

</head>
<body>
<div id="container"></div>
<div class="layui-row">
    <form class="layui-form" action="" style="line-height: 40px">
        <div class="layui-inline" id="search1">
            <div class="layui-input-inline">
                <input type="text" name="address" style="width: 240px" id="address" placeholder="" class="layui-input" autocomplete="off">
                <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height: auto;display:none;"></div>
            </div>
            <div class="layui-input-inline">
                <a href="javascript:;" class="pear-btn pear-btn-md pear-btn-primary" id="searchMyGeo" onclick="searchZb()" title="搜索">
                    <i class="layui-icon layui-icon-search"></i>
                </a>
            </div>
        </div>

        <div class="layui-inline" id="search2">
            <div class="layui-input-inline">
                <input type="text" name="lngLat" id="lngLat" value="" readonly placeholder="" class="layui-input" autocomplete="off">
            </div>
            <div class="layui-input-inline">
                <button type="submit" class="pear-btn pear-btn-md pear-btn-primary" lay-submit="" lay-filter="lngLat-save">
                    <i class="layui-icon layui-icon-ok"></i>
                    确定
                </button>
            </div>
        </div>
    </form>
</div>
<div class="tangram-suggestion-main" id="tangram-suggestion--TANGRAM__1l-main"
     data-guid="TANGRAM__1l" style="position: absolute;left: 10px;top: 35px;width: 240px;display: none;">
    <div style="position: absolute; top: 0px; left: 0px; width: 240px;">
        <iframe src="javascript:void(0)" frameborder="0" scrolling="no" height="97%"
                style="width: 165px; z-index: -1; display: block; border: 0px;">
        </iframe>
    </div>
    <div id="tangram-suggestion--TANGRAM__1l" class="tangram-suggestion" style="position:relative; top:0px; left:0px">
        <table cellspacing="0" cellpadding="2">
            <tbody class="zb-tbody">

            </tbody>
        </table>
    </div>
</div>
<!--<div id="r-result">请输入:<input type="text" id="suggestId" size="20" value="百度" style="width:150px;" /></div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>-->
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script src="//api.map.baidu.com/api?type=web&v=2.0&ak=UP9aRFsRMlAGV744QkpSoChSY0KeIzb8"></script>
<script>
    layui.use(['table', 'form', 'jquery', 'dictionary', 'laydate', 'laypage'], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let laydate = layui.laydate;
        let laypage = layui.laypage;
        var pid;
        var map = new BMap.Map('container'); // 创建Map实例
        map.centerAndZoom(new BMap.Point(115.946852,38.930559), 10);
        map.enableScrollWheelZoom(true);

        var scaleCtrl = new BMap.ScaleControl();  // 添加比例尺控件
        map.addControl(scaleCtrl);

        map.addEventListener('click', function(e) {
            map.clearOverlays();
            var point = new BMap.Point(e.point.lng, e.point.lat);
            var marker = new BMap.Marker(point);        // 创建标注
            map.addOverlay(marker);                     // 将标注添加到地图中
            $("#lngLat").val(e.point.lng.toFixed(4) + ',' + e.point.lat.toFixed(4));
        });

        form.on('submit(lngLat-save)', function () {
            // parent.layer.getChildFrame('#coordinate', parent.layer.getFrameIndex("taskinfo")).val($("#lngLat").val()); // 已通过其他方法实现
            parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
            parent.frames[0].setCoordinate($("#lngLat").val());
        });

        window.changeTrColor=function (obj,flag){
            if (flag==1){
                $(".item1").removeClass("bgA");
                $(obj).addClass("bgA")
            }else{
                $(".item1").removeClass("bgA");
            }
        }
        window.changeTr=function (obj,uuid,lng,lat){
            $(".item1").removeClass("bgA");
            $(obj).addClass("bgA")
            $("#lngLat").val(lng+','+lat);
            var allOverlay  = map.getOverlays();
            uuid=uuid.substr(1);
            console.log(uuid,lng,lat);
            for (var i = 0; i < allOverlay.length; i++) {
                if (allOverlay[i].id == "u"+uuid) {
                    allOverlay[i].hide();
                }else if(allOverlay[i].id == pid){
                    map.removeOverlay(allOverlay[i]);
                }else{
                    allOverlay[i].show();
                }
            }
            addmMarker('p'+uuid,lng,lat,null,true);
            pid='p'+uuid;
        }

        $('#address').on('input propertychange', function() {
            var v=$("#address").val();
            if (v!=''){
                $(".tangram-suggestion-main").css("display","block");
            }else{
                $(".tangram-suggestion-main").css("display","none");
            }
            var html='';
            var uid;
            var lng;
            var lat;
            $.ajax({
                /*url: 'http://ip:port/search?q=大王庄&city=保定&output=json',*/
                url: '${ctxPath}/admin/data/data.json',
                dataType: 'json',
                contentType:'application/json',
                type:'get',
                success:function(result){
                    if (result.message=='ok'){
                        if (result.results.length>0){
                            for (var i=0;i<result.results.length;i++){
                                uid ='u'+result.results[i].uid;
                                lng =result.results[i].location.lng;
                                lat =result.results[i].location.lat;
                                html +='<tr>\n' +
                                    '                <td id="tangram-suggestion--TANGRAM__1l-item'+i+'" onclick="changeTr(this,\''+uid+'\','+lng+','+lat+')" class="item1">\n' +
                                    '                    <i class="route-icon">\n' +
                                    '                        '+result.results[i].address+'\n' +
                                    '                    </i>\n' +
                                    '                </td>\n' +
                                    '            </tr>';
                            }
                            $(".zb-tbody").html(html);
                        }else{
                            $(".zb-tbody").html('暂无结果');
                        }
                    }else{
                        $(".zb-tbody").html('暂无结果');
                    }
                },error:function (){
                    alert('系统异常');
                }
            });
        })

        window.searchZb=function (){
            map.clearOverlays();
            var v=$("#address").val();
            $.ajax({
                /*url: 'http://ip:port/search?q=大王庄&city=保定&output=json',*/
                url: '${ctxPath}/admin/data/data.json',
                dataType: 'json',
                contentType:'application/json',
                type:'get',
                success:function(result){
                    if (result.message=='ok'){
                        if (result.results.length>0){
                            for (var i=0;i<result.results.length;i++){
                                console.log('u'+result.results[i].uid,result.results[i].location.lng,result.results[i].location.lat);
                                addmMarker('u'+result.results[i].uid,result.results[i].location.lng,result.results[i].location.lat,result.results[i].address,false);
                            }
                            map.panTo(new BMap.Point(result.results[0].location.lng,result.results[0].location.lat), 12);
                        }
                    }
                }
            });
        }

        function addmMarker(id,lng,lat,title,flag){
            var img;
            if (flag==false){
                img="../../admin/images/zy1.png";
            }else{
                img="../../admin/images/zy2.png";
            }
            var size = new BMap.Size(28, 32),
                offset = new BMap.Size(0, -13),
                imageSize = new BMap.Size(28, 32),
                icon = new BMap.Icon(img, size, {
                    imageSize: imageSize
                });
            var point=new BMap.Point(lng,lat);
            var marker = new BMap.Marker(point, {
                icon: icon,
                offset: offset
            });
            var marker=new BMap.Marker(point,{
                icon: icon,
                offset: offset,
                title: title
            });
            marker.id=id;
            map.addOverlay(marker);    //添加标注
            if (flag==true){
                marker.setAnimation(BMAP_ANIMATION_BOUNCE);
            }
        }
    })
</script>
</body>
</html>
